<template>
  <a-layout-header class="header-container">
    <!-- <div class="menu-collapsed">
      <MenuUnfoldOutlined v-if="collapsed" class="menu-collapsed-btn" @click="$emit('changeCollapsed')" />
      <MenuFoldOutlined v-else class="menu-collapsed-btn" @click="$emit('changeCollapsed')" />
    </div> -->

    <div class="header-main">
      <div class="header-main-left">
        <!-- <Breadcrumb /> -->
        <div class="logo">
          <p  class="bigLogo">
            <img src="../../assets/bf.png" alt="">
          </p>
        <!-- <p v-show="collapsed" class="minLogo" title="AntdVue Admin">百分网</p> -->
        <p class="logo-title">开发者平台</p>
      </div>
      </div>
      <div class="header-main-right">
        <div >
          <HelpDocument/>
        </div>
        <div class="header-fullscreen">联系客服</div>
        <div class="header-fullscreen">
          <Fullscreen />
        </div>
        <div>
          <UserAvatar />
        </div>
      </div>
    </div>
  </a-layout-header>
</template>

<script lang="ts" setup>
  // import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue'
  import HelpDocument from "./HelpDocument/index.vue";
  import Fullscreen from './Fullscreen/index.vue'
  import UserAvatar from './UserAvatar/index.vue'
  import Breadcrumb from './Breadcrumb/index.vue'
  defineProps({
    collapsed: Boolean
  })
</script>

<style lang="less" scoped>
  .header-container {
    background: #fff;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .menu-collapsed {
      margin-right: 24px;
      flex: none;
      display: flex;
      align-items: center;
      .menu-collapsed-btn {
        font-size: 18px;
        line-height: 0px;
        cursor: pointer;
        transition: color 0.3s;

        &:hover {
          color: #1890ff;
        }
      }
    }

    .header-main {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .header-main-left {
        .logo {
          height: 32px;
          padding: 24px 12px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 18px;
          color: #4CC87E !important;
          overflow: hidden;
          .bigLogo {
            width: 154px;
            text-align: center;
            letter-spacing: 2px;
            font-weight: bold;
            font-size: 15px;
            color: #3C3C3C;
            line-height: 20px;
            text-align: left;
            img{
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }
          .logo-title{
            width: 80px;
            height: 24px;
            font-weight: 400;
            font-size: 16px;
            color: #6E6E6E;
            line-height: 24px;
            text-align: left;
          }
          .minLogo {
            text-align: center;
            color: #fff;
          }
        }
      }
      .header-main-right {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        .header-fullscreen {
          margin-right: 20px;
        }
      }
    }
  }
</style>
